<template>
  <div class="wh-100" style="background-color: #fff">
    <!-- 档案数据统计 -->
    <div class="d-flex-between-center px-12 bor-base-b ">
      <div class="fs-16 fw-7 two-wh pl-12">户口数据统计</div>
      <Button v-if="showBack" class="btn-primary" @click="backMeth">返回</Button>
    </div>
    <!-- 档案信息登记实时统计-->
    <div class="d-flex-between-center wrapper01" >
      <div class="employmentModule" style=" background: linear-gradient(to  right, #F7F9FD 75%, #D8E8FD 100%);">
        <div class="pic-first d-flex-align-center fs-14 pl-36">
          <div class="w-100 ">
            <div class="text_one h-30 cfw900" >
              户口信息登记实时统计
            </div>
            <div v-if="showItemStyle" class="h-30 d-flex-align-center cfw700" >
              <div v-if="resource ==2 || resource == 1" style="color: rgb(22, 119, 255) ;" type="text">{{ gxmc }}</div>
              <div v-if="resource ==3" style="color: rgb(22, 119, 255) ;" type="text">
                {{ gxmc && gxmc.indexOf(',') != -1 ? gxmc.substring(0, 10) + '...' : gxmc }}
              </div>
              <div v-if="resource ==3" style="position: absolute;bottom: 23%;right:0;z-index: 100" @click="reviewAvatar()">

                <el-avatar class="iconStyle d-flex-around-center" icon="el-icon-menu"></el-avatar>
              </div>
            </div>
          </div>
          <img v-if="showItemStyle" class="img01" src="./images/background1.png"/>
        </div>
        <div class="pic-body">
          <div>
            <div class="text_title">{{ testData.totalBysNum }}</div>
            <div class="text_info">总人数</div>
          </div>
        </div>
        <div class="pic-body">
          <div>
            <div class="text_title">{{ testData.registered }}</div>
            <div class="text_info">已通过审核</div>
          </div>
        </div>
        <div class="pic-body">
          <div>
            <div class="text_title">{{ testData.beRejected }}</div>
            <div class="text_info">驳回</div>
          </div>
        </div>
        <div class="pic-body">
          <div>
            <div class="text_title">{{ testData.canceled }}</div>
            <div class="text_info">学生撤回</div>
          </div>
        </div>
        <div class="pic-body">
          <div>
            <div class="text_title">{{ testData.unRegistered }}</div>
            <div class="text_info">暂未登记或上报</div>
          </div>
        </div>
        <div class="pic-body">
          <div>
            <div class="text_title">{{ testData.underSchoolReview }}</div>
            <div class="text_info">学校审核中</div>
          </div>
        </div>
        <div class="pic-body">
          <div>
            <div class="text_title">{{ testData.underCollegeReview }}</div>
            <div class="text_info">院系审核中</div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-100">
      <Table v-if="!showItemStyle" :columns="statisticsColumnsOne" :data="testData.children" class=" ">
        <template slot-scope="{row}" slot="action">
          <div class="wh-100 d-flex-align-center fs-14" style="color: rgb(40, 115, 243)">
            <div class="mr-8 cursor-pointer" @click="reviewViewDetail(row)">查看</div>
          </div>
        </template>
      </Table>
      <Table v-else :columns="statisticsColumns" :data="testData.children" class=" "></Table>

    </div>

    <Modal v-model="modal2" width="400">
      <div slot="header" style="color:black">
        <div class="fs-14 fw-7">管理的院系</div>
      </div>
      <div class="wh-100 d-flex flex-wrap">
        <div v-for="item in collegeList" class="mr-8 mt-8" style="">
          <el-tag>{{ item }}</el-tag>
        </div>
      </div>
    </Modal>
  </div>
</template>


<script>


import Cookies from 'js-cookie';
import {getDataStatistics} from '../../api/archivesManagement/archiveForwardingAddressApis';
import {getDataStatisticsApi} from '../../api/accountManagement/accountManagementApis';

const statisticsColumns = [
  {
    title: '院系名称',
    key: 'name',
    minWidth: 400
  },
  {
    title: '总人数',
    key: 'totalBysNum',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '已通过审核',
    key: 'registered',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '学生撤回',
    key: 'canceled',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '驳回',
    key: 'beRejected',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '暂未登记或上报',
    key: 'unRegistered',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '学校审核中',
    key: 'underSchoolReview',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '院系审核中',
    key: 'underCollegeReview',
    minWidth: 70,
    align: 'center'
  }

];

const statisticsColumnsOne = [
  {
    title: '院系名称',
    key: 'name',
    minWidth: 400
  },
  {
    title: '总人数',
    key: 'totalBysNum',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '已通过审核',
    key: 'registered',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '学生撤回',
    key: 'canceled',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '驳回',
    key: 'beRejected',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '暂未登记或上报',
    key: 'unRegistered',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '学校审核中',
    key: 'underSchoolReview',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '院系审核中',
    key: 'underCollegeReview',
    minWidth: 70,
    align: 'center'
  },
  {
    title: '操作',
    slot: 'action',
    minWidth: 70,
  }
];

export default {
  data() {
    return {
      modal2: false,
      showBack: false,
      showItemStyle: false,
      resource: "",
      testData: [],
      collegeList: [],
      gxmc: "",
      statisticsColumns,
      statisticsColumnsOne
    };
  },
  async mounted() {
    let userInfo = JSON.parse(Cookies.get('userInfo'))
    this.resource = userInfo.resource
    if (userInfo.resource == 1) {
      await this.getData(null)
    }
    if (userInfo.resource == 2) {
      await this.getData(userInfo.gxcode)
    }
    if (userInfo.resource == 3) {
      await this.getData(userInfo.gxcode)
    }

  },
  methods: {
    reviewAvatar() {
      if (this.gxmc.indexOf(",") != -1) {
        let dwszd = this.gxmc.split(',') || '';
        this.collegeList = []
        for (let item of dwszd) {
          this.collegeList.push(item)
        }
      } else {
        this.collegeList = []
        this.collegeList.push(this.gxmc)
      }
      this.modal2 = true;
    },
    async backMeth() {
      await this.getData(null)
      this.showItemStyle = false;
      this.showBack = false;
    },
    async reviewViewDetail(row) {
      await this.getData(row.gxcode)
      this.showItemStyle = true;
      this.showBack = true;

    },
    async getData(gxCode) {
      let res = await getDataStatisticsApi({schoolCode: gxCode})
      if (res.code == 200) {
        let userInfo = JSON.parse(Cookies.get('userInfo'))
        this.gxmc = res.result.name
        if (userInfo.resource == 2) {
          this.showItemStyle = true;
          this.statisticsColumns[0].title = "院系名称"
        }
        if (userInfo.resource == 3) {
          this.showItemStyle = true;
          this.statisticsColumns[0].title = "专业名称"
          console.log(this.gxmc)
        }
        this.resource = userInfo.resource
        this.testData = res.result;


      }
    }
  }
};
</script>
<style scoped lang="less">

//form表单间距统一修改
.ivu-form-item {
  margin-bottom: 0.01rem !important;
}

.two-wh {
  height: 50px;
  padding-top: 15px;
  font-size: 16px;
  font-color: #000000;
}

.employmentModule {
  width: 97%;
  border: 100px;
  display: flex;
  justify-content: space-between;
}

.pic-first {
  position: relative;
  width: 450px;
  height: 85px;
}

.pic-body {
  width: 450px;
  height: 85px;
  background-size: 268px 100px;
  align-items: center;
  padding: 10px 20px;
  border-radius: 15px;
  text-align: center;
}

.text_title {
  font-size: 25px;
  font-weight: 400;
  align-items: center;
  color: #333333;
}

.text_info {
  font-size: 14px;
  align-items: center;
  color: #333333;
}

.iconStyle {
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.35);
  color: #999999;
  border: 1px solid rgb(255, 255, 255);
}
.iconStyle:hover {
    color: rgb(22, 119, 255);
    border: 1px solid rgb(22, 119, 255);
}

.el-avatar--icon {
  font-size: 14px;

}
.wrapper01 {
  height: 100px; padding-left: 24px; width: 100%;
}
.cfw900 {
  font-weight: 900; color: #000000;
}

.cfw700 {
  font-weight: 700;
}
.img01 {
  position: absolute;bottom: 0;left:0;
}
</style>
